<template>
  <div id="main">
    <el-container>
      <el-header>
        <span>header</span>
      </el-header>

      <el-main>
        <el-container>
          <el-aside>
            <el-menu :default-openeds="[]" background-color='white' :unique-opened='true'>
              <el-submenu index='1'>
                <template slot='title'><i class="el-icon-message"></i>首页</template>
                <el-menu-item-group>
                  <el-menu-item index="1-1">轮播图片</el-menu-item>
                  <el-menu-item index="1-2">荣誉证书</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index='2'>
                <template slot="title"><i class="el-icon-message"></i>新闻动态</template>
                <el-menu-item-group>
                  <el-menu-item index="2-1">公司动态</el-menu-item>
                  <el-menu-item index="2-2">行业资讯</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index='3'>
                <template slot="title"><i class="el-icon-message"></i>帮助支持</template>
                <el-menu-item-group>
                  <el-menu-item index="3-1">蛮有财</el-menu-item>
                  <el-menu-item index="3-2">0税宝</el-menu-item>
                  <el-menu-item index="3-3">出口E贷</el-menu-item>
                  <el-menu-item index="3-4">外贸服务平台</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index='4'>
                <template slot="title"><i class="el-icon-message"></i>关于我们</template>
                <el-menu-item-group>
                  <el-menu-item index="4-1">联系我们</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index='5'>
                <template slot="title"><i class="el-icon-message"></i>系统用户</template>
                <el-menu-item-group>
                  <el-menu-item index="4-1">用户信息</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-aside>
          <el-main class='my-main'>
            
            <vue-ueditor-wrap v-model="msg" :config="myConfig"/>

            <div v-html='msg' class='page'></div>
            
          </el-main>
        </el-container>
        
      </el-main>
    </el-container>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 500,
        // 初始容器宽度
        initialFrameWidth: '1020',
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        // serverUrl: 'http://35.201.165.105:8000/controller.php',
        serverUrl: 'http://127.0.0.1/UEditor',
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: '/static/UEditor/'
      }
    }
  },
  components: {
    VueUeditorWrap
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header{
  padding: 0;
  background-color: blueviolet;
}

.el-main {
  padding: 0;
  background-color: cadetblue;
  height: 100%;
}

.el-aside {
  padding: 0;
  background-color: white;
  width: 200px !important;
  height: 100%;
}

#main{
  height: 100%;
}

.el-container{
  height: 100%;
}

.page{
  background-color: white;
  width: 1000px;
}

.my-main {
  padding: 10px;
}

</style>
